<template>
  <view class="box">
    <!-- 购物车列表开始 -->
    <view class="content u-flex" v-for="(item, index) in goods" :key="index">
      <view class="left">
        <!-- 复选框 -->
        <label class="u-flex good_item" @click="change(index)">
          <checkbox class="incheckbox" :checked="item.is_promote" />
          <!-- 中间图片 -->
          <view class="img u-flex-1">
            <u-image
              :src="item.goods_small_logo"
              mode="widthFix"
              width="80%"
            ></u-image>
          </view>
        </label>
      </view>

      <!-- 右边 -->
      <view class="right u-flex u-flex-1">
        <view class="goods_name u-line-2">{{ item.goods_name }}</view>

        <view class="footRight u-flex">
          <view class="goods_price">￥{{ item.goods_price }}</view>
          <view class="goods_right u-flex">
            <!-- <view class="btn" @click="btnCount(-1, index)">-</view>
            <view class="num">{{ item.goods_number }}</view>
            <view class="btn" @click="btnCount(1, index)">+</view> -->
            <u-number-box
              v-model="item.count"
              bg-color="#fff"
              @change="valChange"
              :index="index"
              disabled-input
              :long-press="false"
            ></u-number-box>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车列表结束 -->

    <!-- 底部合计全选按钮开始 -->
    <view class="navigation u-flex">
      <view class="left"
        ><label @click="changeAll" class="All"
          ><checkbox class="incheckbox" :checked="checkAll" />全选
        </label>
        <text class="count">合计: </text>
        <text class="count_num">￥{{ num }}</text>
      </view>
      <view class="right" @click="goOrder"> 去结算({{ chenckNum }}) </view>
    </view>
    <!-- 底部合计全选按钮结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
    };
  },

  //页面初始化的全选按钮
  onLoad() {
    // 并且设置全选按钮
    //刚开始时，是空数组，所以要判断长度为0时，就是false
    this.checkAll =
      this.goods.length && this.goods.every((item) => item.is_promote);
  },

  //获取仓库里面的函数，进行页面渲染
  computed: {
    //商品信息
    goods() {
      return this.$store.state.goods;
    },

    //总价
    num() {
      let allPrice = 0;
      this.goods.forEach((goods) => {
        if (goods.is_promote) {
          allPrice += goods.count * goods.goods_price;
        }
      });
      return allPrice;
    },

    // 商品总数量
    chenckNum() {
      let count = 0;
      this.$store.state.goods.forEach((goods) => {
        if (goods.is_promote) {
          count += goods.count;
        }
      });
      return count;
    },
  },

  //函数
  methods: {
    goOrder() {
      // 判断有没有选中的商品
      if (this.allCount > 0) {
        // 有跳
        uni.navigateTo({
          url: "/pages/pay/pay",
        });
      } else {
        // 没有 - 去购物
        uni.showToast({
          title: "您还没有选购商品",
          icon: "none",
        });
      }
    },

    //把弹窗做一个封装
    async getToast(value, index) {
      const goods = this.goods;
      //判断当前用户是不是想删除数据
      //条件，当前商品数量为1，用户再点击减号时，弹窗询问
      if (value == 0) {
        const [err, result] = await uni.showModal({
          title: "提示",
          content: "您舍得删除数据吗？┭┮﹏┭┮",
          showCancel: true,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
        });
        //用户点击了确定，删除数据
        if (result.confirm) {
          //删除数据
          console.log("确定");
          //找到那个数组的数据，删除
          goods.splice(index, 1);
          this.$store.commit("setGoods", goods);
        } else {
          //用户取消
          goods[index].count = 1;
          console.log("用户取消");
          this.$store.commit("setGoods", goods);
        }
      }
    },

    //输入框内容发生变化时触发
    async valChange(e) {
      console.log(1);
      const goods = this.goods;
      // 修改值
      goods[e.index].count = e.value;
      // 再告诉仓库柜台人员修改数据
      this.$store.commit("setGoods", goods);
      //调用弹窗函数
      this.getToast(e.value, e.index);
    },

    // 全选按钮
    changeAll() {
      // 设置全选按钮的选中状态
      this.checkAll = !this.checkAll;
      const goods = this.goods;
      goods.map((item) => {
        return (item.is_promote = this.checkAll);
      });
      // 向仓库设置回数据;
      this.$store.commit("setGoods", goods);
    },

    //点击复选框触发函数
    change(index) {
      console.log(index);
      const goods = this.goods;
      goods[index].is_promote = !goods[index].is_promote; //手动将状态取反,将数据与视图同步
      // 并且设置全选按钮
      this.checkAll = goods.every((item) => item.is_promote);
      // 向仓库设置回数据
      this.$store.commit("setGoods", goods);
    },
  },
};
</script>

<style lang="scss">
.incheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
}

.incheckbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #eb4450;
}
.incheckbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: #fff; /* 对勾颜色 白色 */
}

.good_item {
  width: 300rpx;
}
.content {
  align-items: stretch;
  border-bottom: 1px solid #eee;
  padding: 10rpx;
  margin-bottom: 61rpx;
}
.box {
  height: 100vh;
  overflow: auto;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 15rpx;
  .goods_price {
    color: $themeColor;
  }
}
.btn {
  width: 45rpx;
  height: 45rpx;
  text-align: center;
  line-height: 35rpx;
  border: 1px solid #a9a9a9;
  border-radius: 50%;
}
.footRight {
  width: 100%;
  justify-content: space-between;
}
.goods_right {
  color: #a9a9a9;
}
.num {
  padding-right: 10rpx;
  padding-left: 10rpx;
}
.navigation {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 10rpx;
  justify-content: space-between;
  z-index: 999;
  .left {
    display: flex;
    font-size: 20rpx;
    margin-right: 20rpx;
    .item {
      margin: 0 30rpx;
    }
  }
  .right {
    font-size: 25rpx;
    width: 150rpx;
    height: 50rpx;
    text-align: center;
    border-radius: 20rpx;
    color: #fff;
    background-color: $themeColor;
    z-index: 999;
  }
}
.count {
  margin-left: 20rpx;
  line-height: 31rpx;
  font-size: 25rpx;
}
.count_num {
  margin-left: 10rpx;
  font-size: 25rpx;
  color: $themeColor;
}
.All {
  font-size: 25rpx;
}
</style>